<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
		<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="../js/jquery.fly.min.js"></script>
		<style>
			.circle {
				width: 50px;
				height: 50px;
				position: absolute;
				background: red;
				border-radius: 50%;
				top: 25%;
			}
			
			.end {
				width: 50px;
				height: 50px;
				position: absolute;
				background: blue;
				border-radius: 50%;
				top: 25%;
				left: 50%;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<p @click="aa">{{message}}</p>
			<select name="status" id="status" v-model="selected" @change="selectmethod($event)">
				 <option value="">请选择</option>
				 <option value="未处理">未处理</option>
				 <option value="处理中">处理中</option>
				  <option value="处理完成">处理完成</option>
			 </select>
			 <div class="circle"></div>
			 <div class="circle" style="left:10%;"></div>
			 <div class="end"></div>
		</div>
	</body>
</html>
<script type="text/javascript">
	var app = new Vue({
	  el: '#app',
	  data: {
	    message: 'Hello Vue.js!',
		selected:''
	  },
	  methods: {
	    reverseMessage: function () {
	      this.message = this.message.split('').reverse().join('')
	    },
		aa:function(){
			this.message = this.selected
		},
		selectmethod(e){
			console.log(e)
			console.log(e.target.value)
			this.message = this.selected
		}
	  }
	})
	
	
	var offset = $('.end').offset();
	$('.circle').click(function (event) {
	    var thisItem = $(this);
	    var flyer = thisItem.clone();
	    flyer.fly({
	        start: {
	            left: event.pageX,
	            top: event.pageY
	        },
	        end: {
	            left: offset.left + 10,
	            top: offset.top + 10,
	            width: 0,
	            height: 0
	        },
	        onEnd: function () {
	            $('.end').css({
	                background: 'red'
	            });
	            setTimeout(function () {
	                $('.end').css({
	                    background: 'blue'
	                });
	            }, 200);
	            // this.destory();
	        }
	    });
	})
</script>